new Vue({
  el: '#root',

  data: {
    years: [],
    months: [],
    dates: [],
    selectedYear: '',
    selectedMonth: '',
    selectedDate: '',
    lunarMonths: [],
    dayMap: ['日','一','二','三','四','五','六'],
  },

  created () {
    const dateIst = new Date()
    const year = dateIst.getFullYear()
    const month = dateIst.getMonth() + 1
    const date = dateIst.getDate()
    this.years = this.getYears(1900, 2100)
    this.months = this.getMonths()
    this.selectedYear = year
    this.selectedMonth = month
    this.selectedDate = date
    this.dates = this.getDates(year, month)
    this.lunarMonths = this.getLunar(year, month).monthData
  },

  watch: {
    selectedYear (val) {
      this.dates = this.getDates(val, this.selectedMonth)
    },
    selectedMonth (val) {
      this.dates = this.getDates(this.selectedYear, val)
    }
  },

  computed: {
    selectedDayZh () {
      const year = this.selectedYear
      const month = this.selectedMonth
      const date = this.selectedDate
      const dayOffset = new Date(`${year}-${month}-${date}`).getDay()
      return `星期${this.dayMap[dayOffset]}`
    },
    lunarMonthDate () {
      const year = this.selectedYear
      const month = this.selectedMonth
      const date = this.selectedDate
      return `${this.getSelectedLunar('M')}${this.getSelectedLunar('d')}`
    },
    lunarYear () {
      const year = this.selectedYear
      const month = this.selectedMonth
      const date = this.selectedDate
      return `${this.getSelectedLunar('T')} 【${this.getSelectedLunar('A')}年】`
    }
  },

  filters: {
    leftPad (str) {
      return leftPad(str, 2, '0')
    }
  },

  methods: {
    getYears (startYear, endYear) {
      const ret = []
      const yearsLen = endYear - 1900
      for (let i = startYear; i <= endYear; i ++) {
        ret.push(i)
      }
      return ret
    },
    getLunar (year, month, day, format) {
      return chineseLunar.solarToLunar(new Date(`${year}/${month}/${day}`), format)
      // return lunar
    },
    getSelectedLunar (format) {
      const year = this.selectedYear
      const month = this.selectedMonth
      const date = this.selectedDate
      return `${this.getLunar(year, month, date, format)}`
    },
    getMonths () {
      const ret = []
      for (let i = 1; i <= 12; i ++) {
        ret.push(i)
      }
      return ret
    },
    getCalendarData (year, month) {
      const thisMonthDay = new Date(year, month - 1, 1)
      const thisMonthFirstDay = thisMonthDay.getDay()
      const thisMonthTotalDates = new Date(year, month, 0)
      return {
          firstDay: thisMonthFirstDay,
          totalDates: thisMonthTotalDates.getDate()
      }
    },
    onClickDate (date) {
      this.selectedDate = date
      this.dates = this.getDates(this.selectedYear, this.selectedMonth)
    },
    getDates (year, month) {
      const calendarData = this.getCalendarData(year, month)
      const ret = []
      for (let date = 1, i = 0; date <= calendarData.totalDates; i ++) {
        if (i < calendarData.firstDay) {
          ret.push({
            date: '',
            lunarDate: '',
          })
        } else {
          const lunarDate = this.getLunar(year, month, date, 'D')
          const { selectedYear, selectedMonth, selectedDate } = this
          const isActive = `${selectedYear}-${selectedMonth}-${selectedDate}` === `${year}-${month}-${date}`
          ret.push({
            date,
            lunarDate,
            isFestival: lunarDate.indexOf('月') > -1,
            isActive: isActive,
          })
          date ++
        }
      }
      return ret
    },
  },

})